<template>
  <el-form-item label="条形展示">
    <el-switch v-model="form.config.bar.strip" @change="stripChange" />
  </el-form-item>
  <el-form-item label="自适应宽度">
    <el-switch v-model="form.config.bar.autoWidth" @change="autoWidthChange" />
  </el-form-item>
  <el-collapse v-model="activeNames2">
    <el-collapse-item
      v-for="(item, index) in form.config.option.series"
      :title="form.config.option.dataset.dimensions[index+1]"
      :name="form.config.option.dataset.dimensions[index+1]"
      :key="index"
    >
      <el-form-item label="宽度(自适应下不可输入)">
        <div class="el-input el-input--default">
          <div class="el-input__wrapper">
            <input
              v-model.lazy="item.barWidth"
              class="el-input__inner"
              :readonly="form.config.bar.autoWidth"
            />
          </div>
        </div>
      </el-form-item>
      <el-form-item label="柱条颜色">
        <el-color-picker v-model="item.itemStyle.color" />
      </el-form-item>
      <el-form-item label="是否显示标签">
        <el-switch v-model="item.label.show" />
      </el-form-item>
      <div v-if="item.label.show">
        <el-form-item label="标签位置">
          <el-select v-model="item.label.position">
            <el-option
              v-for="item in configData.positionList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="文字颜色">
          <el-color-picker v-model="item.label.color" />
        </el-form-item>
        <el-form-item label="文字大小">
          <el-slider
            style="margin-left: 10px"
            v-model="item.label.fontSize"
            :min="10"
            :max="30"
            size="small"
          />
        </el-form-item>
        <el-form-item label="内容格式">
            <el-input
              v-model="item.label.formatter"
              type="textarea"
            />
          </el-form-item>
      </div>
    </el-collapse-item>
  </el-collapse>
</template>
<script setup>
import { ref, defineModel, onMounted } from "vue";
import { deepClone } from "@/utils/arr.js";
const activeNames2 = ref();
const form = defineModel();
const props = defineProps({
  configData: { type: Array, default: [] },
});
onMounted(()=>{
  autoWidthChange(form.value.config.bar.autoWidth)
})
const stripChange = () => {
  let x = deepClone(form.value.config.option.xAxis);
  form.value.config.option.xAxis = deepClone(form.value.config.option.yAxis);
  form.value.config.option.yAxis = x;
};
const autoWidthChange = (val) => {
  if (val) {
    form.value.config.option.series.forEach((element) => {
      element.barWidth = ''
    });
  } else {
    form.value.config.option.series.forEach((element) => {
      element.barWidth = "15";
    });
  }
};
</script>